<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>公告管理</span>
      </div>
    </template>

    <!-- 添加公告表单 -->
    <el-form :model="addForm" label-width="120px">
      <el-form-item label="公告标题">
        <el-input v-model="addForm.title" placeholder="请输入公告标题"></el-input>
      </el-form-item>
      <el-form-item label="公告内容">
        <el-input type="textarea" v-model="addForm.content" :rows="5" placeholder="请输入公告内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addNotice">添加公告</el-button>
      </el-form-item>
    </el-form>

    <!-- 公告列表 -->
    <el-table :data="noticeList" stripe>
      <el-table-column prop="title" label="公告标题" width="200"></el-table-column>
      <el-table-column prop="content" label="公告内容" width="300">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.content" placement="top">
            <div class="ellipsis-text">{{ row.content }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="发布人" width="120"/>
      <el-table-column prop="createTime" label="发布时间" width="180"/>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleteNotice(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addNoticeService, deleteNoticeService , noticeListService } from '@/api/notice'
import { ElMessageBox} from "element-plus";

//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数
// 添加公告表单数据
const addForm = reactive({
  title: '',
  content: ''
})

// 公告列表数据
const noticeList = ref([])

// 添加公告
const addNotice = async () => {
  try {
    const result = await addNoticeService(addForm)
    if (result.code === 0) {
      ElMessage.success('添加公告成功')
      // 重新获取公告列表
      await getNoticeList()
      // 清空表单
      addForm.title = ''
      addForm.content = ''
    } else {
      ElMessage.error(result.message || '添加公告失败')
    }
  } catch (error) {
    console.error('添加公告错误:', error)
    ElMessage.error('添加公告失败，请稍后重试')
  }
}

// 获取公告列表
const getNoticeList = async () => {
  const params = {
    page: page.value,
    pageSize: pageSize.value,
  }
    const result = await noticeListService(params) 
    if (result.code === 0 && result.data) {
      noticeList.value = result.data.records
    } else {
      ElMessage.error(result.message || '获取公告列表失败')
    }

}

// 删除公告
const deleteNotice = async (id) => {
  ElMessageBox.confirm(
      '你确认要删除该公告吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(
    async () => {
      const result = await deleteNoticeService(id)
      ElMessage({
      showClose: true,
      message: result.msg ? result.msg : "删除成功",
      type: 'success',
    })
    getNoticeList()
  }
  )
}


getNoticeList()
</script>

<style scoped>
.page-container {
  min-height: 100%;
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>